<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vue.set()和数据监视_数组</title>
  </title>
  <!-- 引入Vue -->
  <script src="../js/vue.js"></script>
</head>

<body>
  <!--
      通过包裹数组更新元素的方法实现，本质就是做了两件事：
        (1).调用原生对应的方法对数组进行更新。
        (2).重新解析模板，进而更新页面。
      在Vue修改数组中的某个元素一定要用如下方法：
        1.使用这些API:push()、pop()、shift()、unshift()、splice()、sort()、reverse()
        2.Vue.set() 或 vm.$set()
          -->
  <!-- 准备容器 -->
  <div id="demo">
    <h1>学校信息</h1>
    <h2>学校名称:{{ name }}</h2>
    <h2>学校地址:{{ address }}</h2>
    <hr />
    <h1>学生信息</h1>
    <button @click.once="addSex">添加一个性别属性,默认值是男</button>
    <h2>学生姓名:{{ stu.name }}</h2>
    <h2>学生真实年龄:{{ stu.age.rage }}</h2>
    <h2>学生对外年龄:{{ stu.age.sage}}</h2>
    <h2 v-if="stu.sex">学生性别: {{ stu.sex }}</h2>
    <h2>朋友们</h2>
    <ul>
      <li v-for="(f, index) in stu.friends" :key="index">{{ f.name }} -- {{ f.age }}</li>
    </ul>
    <button @click.once="addFriends">点击添加一个friends</button>

  </div>


  <script type='text/javascript'>
    Vue.config.productionTip = false; //设置为 false 以阻止 vue 在启动时生成生产提示。

    // 创建一个Vue实例
    const vm = new Vue({
      el: '#demo',
      data: {
        name: '家里蹲大学',
        address: '家里蹲',
        stu: {
          name: 'tom',
          age: {
            rage: 12,
            sage: 29
          },
          friends: [
            { name: 'Jerry', age: 23 },
            { name: 'Jane', age: 18 }
          ]
        }
      },
      methods: {
        addSex () {
          /* //直接在对象上添加或移除属性不是响应式的
          this.stu.sex = '男' */
          //使用Vue.set()或者vm.$set()方法追加属性，可以作为响应式
          this.$set(this.stu, 'sex', '男')
        },
        addFriends () {
          this.stu.friends.push({ name: 'Tom', age: 20 })
        }
      }


    })

  </script>

</body>

</html>